<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <script src="../../layui/layui.js"></script>
  <style>
    .layui-menu-item-checked::after {
      display: none;
    }

    .layui-menu-item-checked * {
      color: green;
    }

    .layui-panel {
      box-shadow: none;
    }
  </style>
  <style>
    a {
      color: blueviolet;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css">
  <script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
</head>

<body style="display: flex;align-items: flex-start;padding-bottom: 20px;box-sizing: border-box;">
  <div style="width: 100%;">
    <h1>弹窗</h1>
    <hr>
    <blockquote class="layui-elem-quote">
      <p>纯原生 <code>CSS</code>+<code>js</code> 实现的一套弹窗效果，样式模仿 <code>Ant Design</code></p>
      <span>下载样式文件：</span>
      <a target="_blank" download href="./ReModel.css">ReModel.css</a>&nbsp;&nbsp;或&nbsp;&nbsp;
      <a target="_blank" download href="./ReModel.scss">ReModel.scss</a><br>
      <span>下载JS文件：</span>
      <a target="_blank" download href="./ReModel.js">ReModel.js</a><br>
      <span>下载字体图标：</span>
      <a target="_blank" download href="../../iconfont/iconfont.zip">Iconfont.zip</a>
    </blockquote>
    <br><br>

    <h2 id="KTDTC">可拖动弹窗</h2>
    <hr>

    <pre class="model-box layui-code" lay-options="{}">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="../../iconfont/iconfont.css">
<!-- 引入按钮样式 -->
<link rel="stylesheet" href="../ReButton/ReButton.css">
<!-- 引入弹窗样式 -->
<link rel="stylesheet" href="./ReModel.css">
<!-- 引入弹窗js -->
<script src="./ReModel.js"></script>

<div>
  <br>&nbsp; 
  <button onclick="openModel()" class="re-btn primary">打开弹窗</button>
</div>
<script>
  function openModel() {
    ReModel({
      title: "这是弹窗",
      content: `<div><p>123123123</p>
                <p>文字蚊子蚊子</p>
                <p>文字蚊子蚊子</p>
                <p>文字蚊子蚊子</p>
                <p>文字蚊子蚊子</p>
                <p>文字蚊子蚊子</p>
                <p>文字蚊子蚊子</p>
                <p>hello world</p></div>`,
      size: ["500px", "auto"],
      btnText: ["No", "Yes"],
      render(elem) {
        console.log(elem);
      },
      close() {
        console.log("弹窗关闭了");
      },
      confim(close) {
        console.log("点击确认了");
        close();
      }
    });
  }
</script>
</pre>
<br><br>
<h2 id="KTDTC">iframe层弹窗</h2>
<hr>
<pre class="model-box layui-code" lay-options="{}">
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <!-- 引入按钮样式 -->
  <link rel="stylesheet" href="../ReButton/ReButton.css">
  <!-- 引入弹窗样式 -->
  <link rel="stylesheet" href="./ReModel.css">
  <!-- 引入弹窗js -->
  <script src="./ReModel.js"></script>
  
  <div>
    <br>&nbsp; 
    <button onclick="openModel()" class="re-btn primary">打开弹窗</button>
  </div>
  <script>
    function openModel() {
      ReModel({
        title: "这是弹窗",
        iframe: true,
        content: "/iconfont/demo_index.html",
        size: ["700px", "500px"],
        render(elem) {
          console.log(elem);
        },
        close() {
          console.log("弹窗关闭了");
        },
        confim(close) {
          console.log("点击确认了");
          close();
        }
      });
    }
  </script>
</pre>

  </div>

  <div class="layui-panel left-box" style="width: 200px; margin-left: 16px;position: sticky;top: 0;">
    <ul class="layui-menu" id="demo-menu">
      <li class="layui-menu-item-group" lay-options="{type: 'parent', isAllowSpread: false}">
        <ul>
          <li class="layui-menu-item-checked">
            <a href="#KTDTC">
              <div class="layui-menu-body-title">可拖动弹窗</div>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script>
  layui.code({
    elem: '.model-box',
    preview: "iframe",
    layout: ['preview', 'code'],
    encode: false,
    done() {
      layui.$("iframe").parent(".layui-code-item").height("700px")
    },
    langMarker: true,
    lang: "html",
    highlighter: "hljs",
    codeRender: function (code, opts) {
      return hljs.highlight(code, { language: opts.lang }).value;
    }
  });
</script>

</html>